<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>节点信息总览</title>
<link rel="stylesheet" type="text/css" href="../../../css/reset.css" />
<link rel="stylesheet" type="text/css" href="../../../css/css.css" />
<link rel="stylesheet" type="text/css"
	href="../../../js/jquery-easyui-1.4.3/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css"
	href="../../../js/jquery-easyui-1.4.3/themes/icon.css" />
<link rel="stylesheet" type="text/css"
	href="../../../css/colorReset.css" />
<style type="text/css">
.main {
	overflow: hidden;
}

.datagrid-htable td, .datagrid-btable td {
	padding: 5px 0 5px 5px;
}

.text_left table td {
	text-align: left;
	padding: 5px 0 5px 5px;
}

.table_con {
	/*border:1px solid #95B8E7;*/
	border-bottom: none;
	margin: 10px 0 0 0;
}

.table_con th {
	font-weight: bold;
	text-align: center;
}

.table_con td {
	text-align: center;
	border: 1px solid #ced6db;
}

/*监控框*/
.menu_tit {
	text-align: center;
	font-weight: bold;
	height: 25px;
	line-height: 25px;
	/*background-color:#efefef;
	background: -webkit-linear-gradient(top,#F9F9F9 0,#efefef 100%);
	background: -moz-linear-gradient(top,#F9F9F9 0,#efefef 100%);
	background: -o-linear-gradient(top,#F9F9F9 0,#efefef 100%);
	background: linear-gradient(to bottom,#F9F9F9 0,#efefef 100%);
	background-repeat: repeat-x;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#F9F9F9,endColorstr=#efefef,GradientType=0);*/
	border-bottom: 1px solid #95B8E7;
	margin: 0;
}

.chart_con {
	border: 1px solid #ced6db;
	overflow: hidden;
	margin: 10px 0 0 0;
}

.tabs-panels .panel {
	border: none;
}

.tabs-header, .tabs-panels {
	border: none;
}

.chart {
	/*float:left;*/
	width: 100%;
	height: 300px;
}

.half {
	width: 50%;
	float: left;
}

.kettle_about {
	/*border:1px solid #95B8E7;*/
	margin: 0 0 10px 0;
}

/*日志框*/
.log_table td {
	text-align: left;
}
</style>

</head>

<body>


	<div class="main">
		<!-- 检索区域开始 -->
		<div class="sel_div">
			<table cellpadding="0" cellspacing="0" class="sel_con">
				<tr>
					<th colspan="6">数据检索</th>
				</tr>
				<tr>
					<td><label>节点名称：</label><input type="text" name="comboxNode"
						id="comboxNode" class="text" /></td>
					<td><label>是否运行：</label><input type="text"
						name="comboxRunning" id="comboxRunning" class="text" /></td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td><button onclick="onSearch()"
							class="query_btn easyui-linkbutton" iconCls="icon-search"
							style="outline: none;">查询</button></td>
					<td>
						<button class="query_btn easyui-linkbutton" iconCls="icon-reset"
							onclick="onReset()" style="outline: none;">重置</button>
					</td>
				</tr>

			</table>
		</div>
		<!-- 检索区域结束 -->
		<div class="data_con">

			<table id="datagrid" style="height: 345px"
				data-options="fitColumns:true">
			</table>

		</div>
	</div>

	<!--运行监控-->
	<div id="showMonWin" title="运行监控">
		<div class="show_con">
			<div class="kettle_about">
				<div class="menu_tit">基本信息</div>
				<table cellpadding="0" cellspacing="0" class="sel_con">
					<tr>
						<td>
							<p>
								<strong>名称：</strong><span class="mon_name">加载中...</span>
							</p>

						</td>
						<td>
							<p>
								<strong>类型：</strong><span class="mon_type">加载中...</span>
							</p>
						</td>
						<td>
							<p>
								<strong>IP地址：</strong><span class="mon_hostName">加载中...</span>
							</p>
						</td>
						<td>
					</tr>

				</table>
			</div>
			<div class="chart_con">
				<div class="menu_tit">服务器资源</div>
				<div id="container" class="chart half"></div>
				<div id="chart2" class="chart half"></div>
			</div>
		</div>
	</div>

	<!--运行日志-->
	<div id="showLogWin" title="运行日志">
		<div class="show_con">
			<div class="table_con">
				<table cellpadding="0" cellspacing="0" class="sel_con">
					<tr>
						<th>节点名称</th>
						<th>IP地址</th>
						<!-- <th>端口</th> -->
						<th>类型</th>
					</tr>
					<tr>
						<td class="lb_none mon_name">加载中...</td>
						<td class="mon_hostName">加载中...</td>
						<!-- <td class="mon_port">加载中...</td> -->
						<td class="rb_none mon_type">加载中...</td>
					</tr>
				</table>
			</div>
			<div class="data_con">
				<table id="logTable" data-options="fitColumns:true">
				</table>
				<!--<table cellpadding="0" cellspacing="0" class="sel_con log_table">
	<tr>
    	<th width="20%">记录时间</th>
        <th width="80%">日志内容</th>
    </tr>
    <tr>
    	<td class="lb_none">2015-09-12 00:00:30.560</td>
		<td class="rb_none">Kettle服务节点监控程序启动成功</td>
    </tr>
    <tr>
    <td class="lb_none">2015-09-12 00:00:00.670</td>
    <td class="rb_none">Kettle服务节点看门狗程序启动成功</td>
    </tr>
    <tr>
    <td class="lb_none">2015-09-12 15:21:00.680</td>
    <td class="rb_none">服务器内存占用率93%</td>
    </tr>
    <tr>
    	<td class="lb_none">2015-09-12 15:25:00.575</td>
        <td class="rb_none">侦测到Kettle服务节点没有正常运行，调用看门狗程序启动Kettle服务节点</td>
     </tr>
     <tr>
     	<td class="lb_none">2015-09-12 15:26:01.640</td>
        <td class="rb_none">看门狗程序调用成功，Kettle服务节点正在运行</td>
        </tr>
        <tr>
        <td class="lb_none">2015-09-12 15:27:00.660</td>
        <td class="rb_none">服务器CPU占用率98%</td>
      </tr>
      <tr>
      	<td class="lb_none">2015-09-12 15:28:00.340</td>
        <td class="rb_none">服务器网络负载率90%</td>
       </tr>
 </table>-->
			</div>
		</div>
	</div>

	<!--运行统计-->
	<div id="showStaWin" title="运行统计">
		<div class="show_con">
			<div class="table_con">
				<table cellpadding="0" cellspacing="0" class="sel_con">
					<tr>
						<th>节点名称</th>
						<th>IP地址</th>
						<!-- <th>端口</th> -->
						<th>类型</th>
						<th>总执行时长（分钟）</th>
						<th>错误率(%)</th>
						<th>最耗时(分钟)</th>
					</tr>
					<tr>
						<td class="lb_none mon_name">加载中...</td>
						<td class="mon_hostName">加载中...</td>
						<!-- <td class="mon_port">加载中...</td> -->
						<td class="mon_type">加载中...</td>
						<td class="mon_allRunTimes">加载中...</td>
						<td class="mon_errorRate">加载中...</td>
						<td class="rb_none mon_mostRunTimes">加载中...</td>
					</tr>
				</table>
			</div>
			<div class="chart_con">
				<div id="tabs" class="easyui-tabs" data-options="tools:'#tab-tools'"
					style="width: 100%;">
					<div title="最耗时" data-options="cache:false, selected:true">
						<div id="chart3" class="chart"></div>
					</div>
					<div title="错误率" data-options="cache:false">
						<div id="chart4" class="chart"></div>
					</div>
				</div>
			</div>
		</div>
	</div>



	<script type="text/javascript" src="/webjars/json3/3.3.2/json3.min.js"></script>
	<script type="text/javascript"
		src="../../../js/jquery-easyui-1.4.3/jquery.min.js"></script>
	<script type="text/javascript"
		src="../../../js/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>
	<script type="text/javascript"
		src="../../../js/jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js"></script>
	<script type="text/javascript" src="../../../js/cook/public.js"></script>
	<script type="text/javascript" src="../../../js/cook/constants.js"></script>
	<script type="text/javascript"
		src="../../../js/Highcharts-4.1.7/js/highcharts.js"></script>
	<script type="text/javascript"
		src="/webjars/sockjs-client/1.0.2/sockjs.min.js"></script>
	<script type="text/javascript"
		src="../../../js/cook/InterfaceMonitoring/NodeMonitoring/SockUrl.js"></script>
	<script type="text/javascript"
		src="../../../js/cook/InterfaceMonitoring/NodeMonitoring/KettleInfoOverview.js"></script>
	<script type="text/javascript">

</script>
</body>
</html>